// 函数式组件调用方法

import { render, createVNode } from 'vue'
import _message from './index.vue'
function Message ({ type, text }) {
  // 渲染组件的逻辑编写
  // 1. 把写好message组件通过createVNode方法生成一个虚拟dom 并且传入俩个props参数
  const messageVNode = createVNode(_message, { type, text })
  // 2. 准备一个挂载的节点containter [body -> div]
  const div = document.createElement('div')
  document.body.appendChild(div)
  // 3. 调用render方法进行组件渲染 把虚拟dom变成真实的dom
  render(messageVNode, div)

  // 优化 1s之后 销毁
  setTimeout(() => {
    render(null, div)
  }, 1000)
}

// 函数式调用组件
// 特点: 灵活性强 完全由开发者进行控制
// 渲染流程: createVNode -> 带有了props参数的组件虚拟dom对象 -> render -> 真实的dom
// createVNode和render偏底层的API 业务中通常不使用 只在开发高阶的组件或者插件时才会用到

export default Message
